<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .m_box{width:300px;height:300px; float: left;margin: 20px;position: relative;}
        .m_box img{width:300px;height:300px;}
        .m_box span{position: absolute;left:0;top:0;background: rgba(255,0,0,0.6);display:none;}

        .b_box{width:300px;height:300px;overflow: hidden;position: relative;float: left;display:none;}
        .b_box img{width:1000px;height:1000px;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="m_box">
        <img src="./imgs/m0.jpg" alt="">
        <span></span>
    </div>
    <div class="b_box">
        <img src="./imgs/l0.jpg" alt="">
    </div>
</body>
<script>
    // 分析：放大镜，等比例跟随鼠标移动
    // 1. 获取元素
    // 2. 绑定事件
        // 进入
            // 3. 显示元素
            // 4. 计算大图显示区域的比例
            // 5. 根据比例计算遮罩层尺寸
        // 离开
            // 6. 隐藏元素
        // 移动
            // 7. 遮罩层跟随鼠标移动
            // 8. 先计算遮罩层移动的比例
            // 9. 根据比例计算右侧大图移动的距离
    
    // 设计
    // function SmallToBig(){
    //     // 1. 获取元素
    //     // 2. 绑定事件
    //     this.addEvent();
    // }
    // SmallToBig.prototype.addEvent = function(){
    //     // 进入
    //         // 3.执行显示功能
    //         this.show();
    //     // 离开
    //         // 6.执行隐藏功能
    //         this.hide();
    //     // 移动
    //         // 7.执行移动功能
    //         this.move();
    // }
    // SmallToBig.prototype.show = function(){
    //     // 显示元素
    //     // 4. 计算比例
    //     // 5. 计算尺寸
    // }
    // SmallToBig.prototype.hide = function(){
    //     // 隐藏元素
    // }
    // SmallToBig.prototype.move = function(){
    //     // 7. 遮罩层跟随鼠标移动
    //     // 8. 先计算遮罩层移动的比例
    //     // 9. 根据比例计算右侧大图移动的距离
    // }

    // 编程
    function SmallToBig(){
        // 1. 获取元素
        this.mBox = document.querySelector(".m_box");
        this.span = document.querySelector(".m_box span");
        this.bBox = document.querySelector(".b_box");
        this.bImg = document.querySelector(".b_box img");

        // 2. 绑定事件
        this.addEvent();
    }
    SmallToBig.prototype.addEvent = function(){
        const that = this;
        // 进入
        this.mBox.onmouseover = function(){
            // 3.执行显示功能
            that.show();
        }
        // 离开
        this.mBox.onmouseout = function(){
            // 6.执行隐藏功能
            that.hide();
        }
        // 移动
        this.mBox.onmousemove = function(){
            // 7.执行移动功能
            that.move();
        }
    }
    SmallToBig.prototype.show = function(){
        // 显示元素
        this.span.style.display = "block";
        this.bBox.style.display = "block";
        // 4. 计算比例
        const x = this.bBox.offsetWidth / this.bImg.offsetWidth;
        const y = this.bBox.offsetHeight / this.bImg.offsetHeight;
        // 5. 计算尺寸
        this.span.style.width = this.mBox.offsetWidth * x + "px";
        this.span.style.height = this.mBox.offsetHeight * y + "px";
    }
    SmallToBig.prototype.hide = function(){
        // 隐藏元素
        this.span.style.display = "none";
        this.bBox.style.display = "none";
    }
    SmallToBig.prototype.move = function(eve){
        const e = eve || window.event;
        // 计算遮罩层要移动的距离
        let l = e.clientX - this.span.offsetWidth/2 - this.mBox.offsetLeft;
        let t = e.clientY - this.span.offsetHeight/2 - this.mBox.offsetTop;
        // 边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.mBox.offsetWidth-this.span.offsetWidth){
            l=this.mBox.offsetWidth-this.span.offsetWidth
        }
        if(t>this.mBox.offsetHeight-this.span.offsetHeight){
            t=this.mBox.offsetHeight-this.span.offsetHeight
        }
        // 7. 设置给遮罩层
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";
        // 8. 计算遮罩层移动的比例
        const x = l / (this.mBox.offsetWidth-this.span.offsetWidth);
        const y = t / (this.mBox.offsetHeight-this.span.offsetHeight);
        // 9. 根据比例计算右侧大图移动的距离
        this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
        this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
    }
    new SmallToBig();


    // 近期，千锋组织了1024程序员活动，有大礼相送
    // 6班：60人，派出一支战队，共16人参与活动
    // 5班：56人，要求派出和6班相同比例的人数参与
    // 问：5班的战队有多少人？

    // 比例值：6班参与比赛的人数 / 6班的总人数
    // 5班应出的人数：比例值 * 5班的总人数



</script>
</html>